<template>
  <view class="category-head-mutli">
    <scroll-view scroll-x @scroll="handleCategory">
      <view class="scroll-wrap">
        <view class="category-head-mutli-item">
          <navigator v-for="item in categoryHeadMutli" :key="item.id">
            <image mode="widthFix" :src="item.icon"></image>
            <text>{{ item.name }}</text>
          </navigator>
        </view>
      </view>
    </scroll-view>
    <view class="scroll-bar">
      <view
        class="scroll-bar-inner"
        :style="{ transform: `translateX(${scrollLeft})` }"
      ></view>
    </view>
  </view>
</template>

<script>
// 导入vuex辅助函数获取安全区域safeArea
import {mapState} from 'vuex';
export default {
  props: ["categoryHeadMutli"],
  data() {
    return {
      scrollLeft: 0,
    };
  },
  computed:{
    ...mapState(["safeArea"])
  },
  methods: {
    handleCategory(e) {
      // 当用户滑动模块 滑动整个屏幕的宽度的时候
      // 绿色模块滑动 自身宽度的100%
      
      // 获取用户滑动的距离 e.detail.scrollLeft
      // 获取屏幕的宽度 this.safeArea.width
      
      // 当滑动距离为0时候 滑动比例为0  0%
      // 当滑动距离为整个屏幕的宽度时 滑动比例为 1 100%
      //css 的 translateX(百分比) 滑动的百分比参照自身的宽度
      
    // console.log('e  ----->  ', e);
    // console.log('e.detail.scrollLeft  ----->  ', e.detail.scrollLeft);
    // console.log('this.safeArea.width  ----->  ', this.safeArea.width);
    const distance = e.detail.scrollLeft / this.safeArea.width //滑动比例
    // console.log('distance  ----->  ', distance);
    this.scrollLeft = distance * 100 + '%' //转换为百分比
    },
  },
};
</script>

<style lang="scss">
.category-head-mutli {
  background-color: #f7f7f8;
  position: relative;
  padding-bottom: 30rpx;
  .scroll-wrap {
    width: 200%;
  }
  .category-head-mutli-item {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    navigator {
      text-align: center;
      width: 20%;
      padding: 15rpx;

      image {
        width: 100rpx;
        display: block;
        margin: 0 auto;
      }
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
  .scroll-bar {
    position: absolute;
    bottom: 15rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 100rpx;
    height: 8rpx;
    background-color: #e2e2e2;
    z-index: 200;
    .scroll-bar-inner {
      width: 50%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #00c09b;
    }
  }
}
</style>